<template>
<div class="form_wrapp">
  <div class="tool-box clear" >
    <div style="display:inline-block" v-if="showForm">
      <div class="tool_item" v-for="(item,key) in formDetails" >
        <label style="margin-left:15px;">{{item.widgetName}}:</label>
         <el-input size="small" v-model="form[key]" style="width:200px" v-if="item.orders===1 && item.type===1" :placeholder="item.widgetDesc" ></el-input>
        <el-input size="small" v-model="form[key]" style="width:200px"  v-if="item.orders===2 && item.type===1" :placeholder="item.widgetDesc"></el-input>
         <el-input size="small" v-model="form[key]" style="width:200px"  v-if="item.orders===3 && item.type===1" :placeholder="item.widgetDesc" type="number"></el-input>
         <el-date-picker v-model="form[key]" style="width:200px" v-if="item.orders===4 && item.type===1" type="date" placeholder="选择日期"> </el-date-picker>
        <el-time-select v-model="form[key]" v-if="item.orders===5 && item.type===1" :picker-options="{start: '00:00', step: '00:15', end: '24:00'}"placeholder="选择时间"> </el-time-select>
         <el-input size="small" v-model="form[key]" style="width:200px"  v-if="item.orders===8 && item.type===1" :placeholder="item.widgetDesc"></el-input>
         <el-input size="small" v-model="form[key]" style="width:200px"  v-if="item.orders===15 && item.type===1" :placeholder="item.widgetDesc" type="number"  step="0.01"></el-input>
          <el-radio-group v-model="form[key]" v-if="item.orders===5 && item.type===2">
            <el-radio :label="option.name" v-for="option in item.options">{{option.name}}</el-radio>
          </el-radio-group>
      </div>
      <el-button size="small" style="margin-left:30px" type="primary" @click="go_seek">搜索</el-button>
    </div>
    <span v-else style="display:inline-block;margin-top:8px">暂无搜索条件</span>
    <el-button size="small" style="float:right" type="primary" @click="export_data">导出数据</el-button>
  </div>

<h1 class="titleTitlebox"> {{tableTitle}} </h1>
 <el-table size="small" :height="windowHeight" v-if="tableStyle ===1 " class="formsTable_box" :data="tableData" style="width: 100%" border @cell-dblclick="cell_dbclick">
   <el-table-column v-for="item in tableTh" :label="item.alias">
      <template slot-scope="scope">
        <div v-if="scope.row.edit">
          <el-input v-model="scope.row[item.col]" size="small" @focus="inputFocus"> <el-button @click="saveRow(scope.row)" slot="append">保存</el-button></el-input>
        </div>
        <div v-else title="双击可以编辑">{{scope.row[item.col]}}</div>
      </template>
   </el-table-column>
 </el-table>

 <el-table :height="windowHeight" v-else-if="tableStyle ===0 " class="formsTable_box" :data="tableData" style="width: 100%" border @cell-dblclick="cell_dbclick">
   <el-table-column v-for="item in tableTh" :label="item">
      <template slot-scope="scope">
        <div>{{scope.row[item]}}</div>
      </template>
   </el-table-column>
 </el-table>
 
 <div class="footer_">
  <el-button v-if="tableData!=''" type="primary" size="small" @click="repage_click">返回</el-button>  
 </div>

</div>
</template>

<script>
import {DEVPATH} from '@/common/js/constant'
export default {
  data(){
    return{
      cols:[],
      formDetails:[],
      tableData:[],
      form:[],
      sumReport:'',
      queryForm:{},
      showForm:false,
      tableTh:[],
      tableName:'',
      tableStyle:'',
      windowHeight: window.innerHeight -220,
      tableTitle:''
    }
  },
  methods:{
    repage_click(){
      window.history.go(-1)
    },
    inputFocus(val){
      
    },
    saveRow(val){
      val.edit =!val.edit;
      val.tabName = this.tableName;
      let params = Object.assign({}, val);

      delete params.orders;
      delete params.edit;

      this.$post("/cusReport/updateDynamicTable",params,data => {
           this.$message({
             message:'保存成功',
             type:'success'
           });
        },error => {
          this.$message.error(error);
      });
    },
    cell_dbclick(row, column, cell, event){
       row.edit =!row.edit;
       console.log(row)
    },
    export_data(){
      let params = [];
      let id=this.$route.query.id
        for(let key in this.formDetails)
        {
          let obj = {
            col:this.formDetails[key].tableCol,
            dataType:this.formDetails[key].dataType,
            value:(typeof(this.form[key])=='undefined') ? '':this.form[key]
          }
           params.push(obj)
        }
      window.open(DEVPATH+'/report/commonExportReport?reportId='+id+'&details='+escape(JSON.stringify(params)));
    },
    go_seek(types){
      let params = {
          cusForms:[{
            details:[]
          }],
         reportId:this.$route.query.id
        }
        for(let key in this.formDetails)
        {
          let obj = {
            col:this.formDetails[key].tableCol,
            dataType:this.formDetails[key].dataType,
            value:(typeof(this.form[key])=='undefined') ? '':this.form[key]
          }
           params.cusForms[0].details.push(obj)
        }
        console.log("输入的搜索内容是：",params);
        this.$post("/cusReport/search",params,data => {
            if(this.tableStyle === 1){
               this.engModel(data);
            }
            if(this.tableStyle ===0){
              this.chinModel(data)
            }
          },error => {
            this.$message.error(error);
        });
    },
    engModel(data){
      if(data.hasOwnProperty("sumReport")){  // 如果底部有统计栏
               _.each(data.report , (item,index) => {
                 item['orders'] = index+1;
                 item['edit'] = false;
               });
               _.each(data.sumReport , (item,index) => {
                 item['orders'] = "统计金额";
                 item['edit'] = false;
               });
               this.tableData = data.report.concat(data.sumReport);
             }
             else{
               _.each(data.report , (item,index) => {
                 item['orders'] = index+1;
                 item['edit'] = false;
               });
               this.tableData = data.report;
             }
    },
    chinModel(data){
      if(data.hasOwnProperty("sumReport")){  // 如果底部有统计栏
               _.each(data.report , (item,index) => {
                 item['序号'] = index+1;
               });
               _.each(data.sumReport , (item,index) => {
                 item['序号'] = "统计金额";
               });
               this.tableData = data.report.concat(data.sumReport);
             }
             else{
               _.each(data.report , (item,index) => {
                 item['序号'] = index+1;
               });
               this.tableData = data.report;
             }
    }
  },
  created(){
    let tname = this.$route.query.name;
    let tid = this.$route.query.id;
    this.tableTitle = tname;
    this.$post("/cusReport/queryForm",{reportId:this.$route.query.id},data => {
      if(data.isUpdate === 1 ){  //  采用英文模式渲染
           this.tableStyle=1;
           let title_o = {alias:'序号', col:'orders'}
           let tableTh = data.tables;
           tableTh.unshift(title_o);
           this.tableTh = tableTh;
           this.tableName = data.tables[1].table;
           if(data.hasOwnProperty("queryForm"))  // 如果没有搜索条件
           {
              this.showForm = true;
              // this.windowHeight = window.innerHeight -240;
              this.formDetails = data.queryForm.details;
              this.queryForm = data.queryForm;
           }
           this.go_seek(data.isUpdate);
        }
        if(data.isUpdate === 0){    // 中文字段
           if(data.hasOwnProperty("queryForm"))  // 如果没有搜索条件
           {
              this.showForm = true;
              // this.windowHeight = window.innerHeight -240;
              this.formDetails = data.queryForm.details;
              this.queryForm = data.queryForm;
           }
            this.tableStyle = 0;
            this.tableTh = data.cols;
            let title_o = "序号"
            this.tableTh.unshift(title_o);
            this.go_seek(data.isUpdate);
        }
      },error => {
        this.$message.error(error);
    });
  }
}
</script>
<style lang="scss">
  .form_wrapp .el-table__body-wrapper::-webkit-scrollbar{
    height:10px;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #fff;
  }
</style>
<style lang="scss" scoped>
.form_wrapp {
  position: absolute;
    top: 10px;
    left: 12px;
    right: 12px;
    bottom: 0;
}
.tool-box{
  font-size:13px;
  padding: 10px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0px 0px 8px #afafaf;
}
.tool_item{
  display: inline-block;
}
.formsTable_box {
  margin-top: 10px;
}
.footer_{
  padding:10px 0;
}
.titleTitlebox{
  padding:20px 0 0 5px;
}
</style>
